<template>
  <el-dialog
    title="修改账单支付状态"
    :visible.sync="dialogStatus"
    width="600px"
  >
    <el-form :model="billForm" ref="ruleForm">
      <el-form-item label="订单编号：" label-width="120px">
        <el-input v-model="billForm.trade_no" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="手机号：" label-width="120px">
        <el-input
          v-model="billForm.mobile"
          :disabled="true"
          class="mobile_input"
        ></el-input>
        <el-button class="mobile_btn" type="text" @click="editMobile">更改手机号</el-button>
        <p style="line-height: 23px; width: 69%; margin-top: 10px; color: #999">
          如需更改手机号请到营销中心-增值服务-短信提醒-商户修改账单线下支付中修改
        </p>
      </el-form-item>
      <el-form-item label="验证码：" label-width="120px">
        <el-input
          v-model="billForm.sms_code"
          placeholder="请输入验证码"
          maxlength="6"
          class="code_input"
        >
        </el-input>
        <el-button
          v-if="codeShow&&$hasMethod('#send')"
          @click="getCode()"
          class="code_btn"
          type="primary"
          >获取验证码</el-button
        >
        <el-button v-else class="code_btn" type="info"
          >{{ count }}秒后重试</el-button
        >
      </el-form-item>
      <el-form-item
        label="期数："
        label-width="120px"
        :disabled="true"
        v-if="billForm.which_period"
      >
        第{{ billForm.which_period }}期
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogStatus = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getOfflinePayData,
  offlinePaySendCode,
  setOfflinePay,
} from "@/api/finance";
export default {
  props: ["orderId", "leaseId", "payData"],
  data() {
    return {
      dialogStatus: false,
      billForm: {
        trade_no: "",
        mobile: "",
        which_period: "",
        sms_code: "",
      },
      codeShow: true,
      count: "",
      timer: null,
    };
  },
  methods: {
    clearTimer() {
      this.codeShow = true;
      clearInterval(this.timer);
      this.timer = null;
    },
    editMobile(){
      this.$router.push({name: 'serviceMessage'})
    },
    getCode() {
      offlinePaySendCode(this.orderId, this.leaseId)
        .then((res) => {
          const TIME_COUNT = 120;
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.codeShow = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.clearTimer();
              }
            }, 1000);
          }
        })
        .catch((err) => {
          this.$message.error("验证码发送失败");
        });
    },
    onSubmit() {
      if (!this.billForm.sms_code) {
        this.$message({
          message: "验证码不能为空",
          type: "error",
        });
        return false;
      }
      setOfflinePay({
        order_id: this.orderId,
        lease_id: this.leaseId,
        sms_code: this.billForm.sms_code,
      })
        .then((res) => {
          this.dialogStatus = false;
          this.billForm.sms_code = "";
          this.clearTimer();
          this.$parent.getList()
        })
        .catch((err) => {});
    },
  },
  watch: {
    dialogStatus(val) {
      if (val) {
        this.$nextTick(() => {
          this.billForm = this.payData;
        });
        this.clearTimer();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-input.is-disabled .el-input__inner{
  color: #333;
}
.el-input__inner {
  border: transparent;
  background: #f5f5f5;
}
.mobile_input {
  position: relative;
}
.mobile_btn {
  position: absolute;
  right: 165px;
}
.code_input {
  position: relative;
}
.code_btn {
  position: absolute;
  right: 150px;
}
</style>